Как PWA, WebAssembly и ChromeOS помогают веб-редактору видео обеспечивать более высокую производительность и более увлекательный опыт для 12 миллионов пользователей.
97 %
Ежемесячный рост установок PWA
2,3 х
Улучшение производительности
9 %
Более высокий уровень удержания пользователей PWA
Clipchamp — это встроенный в браузер онлайн -редактор видео , который позволяет любому человеку рассказывать истории, которыми стоит поделиться, с помощью видео. Более 12 миллионов создателей по всему миру используют Clipchamp для легкого редактирования видео. Мы предлагаем простые решения для создания видео: от интуитивно понятных инструментов, таких как обрезка и кадрирование, до практичных функций, таких как наш рекордер экрана и даже создатель мемов .
Кто использует Clipchamp?
Наши пользователи (или обычные редакторы, как мы их называем) разнообразны. Для того, чтобы быть видеоредактором Clipchamp, не требуется никаких специальных знаний. В частности, в настоящее время мы замечаем, что команды по продажам, обучению поддержки и маркетингу продукта используют нашу веб-камеру и устройство записи экрана для быстрого пояснительного контента с добавлением текста и GIF-файлов, чтобы сделать его интересным. Мы также наблюдаем, как многие малые предприятия редактируют и публикуют социальные видеоролики, находясь в движении.
С какими проблемами они сталкиваются?
Мы понимаем, что редактирование видео может поначалу пугать. Предполагается, что это сложно, вероятно, из-за предыдущего неудачного опыта работы со сложным программным обеспечением для редактирования. В отличие от этого, Clipchamp фокусируется на простоте и удобстве, предоставляя поддержку с текстовыми наложениями, стоковым видео и музыкой, шаблонами и многим другим.
Мы обнаружили, что большинство редакторов не хотят создавать шедевры кино. Мы много общаемся с нашими пользователями и постоянно напоминаем им, что они заняты и просто хотят донести свою историю до мира как можно быстрее и проще, поэтому это является для нас фокусом.
Разработка Clipchamp PWA
В Clipchamp мы всецело стремимся дать людям возможность рассказывать свои истории с помощью видео. Чтобы соответствовать этому видению, мы вскоре поняли, что важно позволить нашим пользователям использовать собственные кадры при создании видеопроекта.
Это понимание оказало давление на инженерную команду Clipchamp, чтобы придумать технологию, которая может эффективно обрабатывать гигабайтные медиафайлы в веб-приложении. Учитывая ограничения пропускной способности сети, мы быстро исключили традиционное облачное решение. Загрузка больших медиафайлов из розничного интернет-соединения неизменно приводила к огромному времени ожидания, прежде чем редактирование могло начаться, что фактически приводило к плохому пользовательскому опыту.
Это заставило нас перейти на полностью браузерное решение, где вся «тяжелая работа» по обработке видео выполняется локально с использованием аппаратных ресурсов, доступных на устройстве конечного пользователя. Мы стратегически делаем ставку на браузер Chrome и, как следствие, платформу ChromeOS, чтобы преодолеть неизбежные проблемы создания браузерной платформы для создания видео.
Обработка видео чрезвычайно ресурсоемка, что влияет как на компьютер, так и на ресурсы хранилища. Мы начали с создания первой версии Clipchamp поверх Google's (Portable) Native Client (PNaCl). Хотя в конечном итоге PNaCl был снят с производства, он стал для нашей команды отличным подтверждением того, что веб-приложения могут быть быстрыми и с низкой задержкой, при этом по-прежнему работая на оборудовании конечного пользователя.
При последующем переходе на WebAssembly мы были рады видеть, что Chrome лидирует в плане внедрения функций пост-MVP, таких как операции с объемной памятью, потоки и совсем недавно: векторные операции с фиксированной шириной. Последнее горячо ожидалось нашей инженерной командой, предлагая нам возможность оптимизировать наш стек обработки видео для использования преимуществ операций SIMD , распространенных на современных процессорах. Используя поддержку SIMD WebAssembly в Chrome, мы смогли ускорить некоторые особенно требовательные рабочие нагрузки, такие как декодирование и кодирование видео 4K.
С небольшим опытом и менее чем за месяц усилий одного из наших инженеров нам удалось повысить производительность в 2,3 раза. Хотя мы все еще были ограничены пробной версией Chrome origin, мы уже смогли внедрить эти улучшения SIMD для большинства наших пользователей. Хотя наши пользователи используют совершенно разные аппаратные настройки, мы смогли подтвердить соответствующее повышение производительности в производстве, не заметив никаких негативных последствий в показателях отказов.
Совсем недавно мы интегрировали новый API WebCodecs, который в настоящее время доступен в рамках другого пробного периода Chrome Origin. Используя эту новую возможность, мы сможем еще больше улучшить производительность декодирования видео на оборудовании с низкими характеристиками, которое установлено во многих популярных Chromebook.
После создания PWA важно поощрять его принятие. Как и во многих веб-приложениях, мы сосредоточились на простоте доступа, которая включает такие вещи, как вход в социальные сети, включая Google, быстрое попадание пользователя в место, где он может редактировать видео, а затем обеспечение простоты экспорта видео. Кроме того, мы продвигали наши подсказки по установке PWA на панели инструментов и в виде всплывающего уведомления в нашем меню навигации.
Результаты
Наш устанавливаемый Chrome PWA работает очень хорошо. Мы были очень рады увидеть, что удержание пользователей PWA на 9% выше, чем у пользователей наших стандартных настольных компьютеров. Установка PWA была массовой, увеличиваясь на 97% в месяц с момента запуска пять месяцев назад. И, как упоминалось ранее, улучшения WebAssembly SIMD повысили производительность в 2,3 раза.
Будущее
Мы приятно удивлены вовлеченностью и восприятием нашего PWA. Мы считаем, что удержание пользователей Clipchamp выиграло, потому что PWA установлен и к нему легче получить доступ. Мы также отметили, что PWA работает лучше для редактора, что делает его более привлекательным и заставляет людей возвращаться.
Заглядывая в будущее, мы рады возможности, которую ChromeOS предоставляет еще большему числу пользователей, чтобы они могли делать больше с меньшими усилиями. В частности, мы рады некоторым удобным интеграциям с локальной ОС при работе с файлами. Мы думаем, что это поможет ускорить рабочие процессы для наших занятых ежедневных редакторов, и это один из наших главных приоритетов.